import React, { Component } from 'react';
import { Card, Table, Button, Space } from 'antd';

import http from '../../../http';

export default class ScoreManage extends Component {
    state = {
        list: [],
    };

    async componentDidMount() {
        const res = await http.get('/scores');
        this.setState({ list: res.data.list });
    }

    handleEditScoreClick(score) {
        console.log('score', score);
        http.put(`/score/${score.id}`);
    }

    handleDeleteScoreClick(score) {
        console.log('score', score);
    }

    render() {
        const columns = [
            {
                title: '学生姓名',
                dataIndex: 'nickname',
            },
            {
                title: '理论成绩',
                dataIndex: 'theory',
            },
            {
                title: '技能成绩',
                dataIndex: 'skill',
            },
            {
                title: '录入时间',
                dataIndex: 'create_time',
                render: (text, record) => {
                    const date = new Date(text);
                    const Y = date.getFullYear();
                    const M = String(date.getMonth() + 1).padStart(2, '0');
                    const D = String(date.getDate()).padStart(2, '0');

                    const hh = String(date.getHours()).padStart(2, '0');
                    const mm = String(date.getMinutes()).padStart(2, '0');
                    const ss = String(date.getSeconds()).padStart(2, '0');
                    return `${Y}-${M}-${D} ${hh}:${mm}:${ss}`;
                },
            },
            {
                title: '操作',
                render: (text, record) => {
                    return (
                        <Space size="middle">
                            <Button
                                type="link"
                                onClick={() =>
                                    this.handleEditScoreClick(record)
                                }
                            >
                                编辑
                            </Button>
                            <Button
                                type="link"
                                danger
                                onClick={() =>
                                    this.handleDeleteScoreClick(record)
                                }
                            >
                                删除
                            </Button>
                        </Space>
                    );
                },
            },
        ];

        return (
            <div className="score-manage">
                <Card>
                    <Table
                        dataSource={this.state.list}
                        columns={columns}
                        rowKey={(record) => record.id}
                    />
                </Card>
            </div>
        );
    }
}
